<template>
	<view class="post">
		<view class="info">
			<view class="tag">
				<view class="item">
					<u-tag class="item" :text="post.cate_text" type="success" plain icon="tags-fill"></u-tag>
				</view>

				<view class="item">
					<u-tag class="item" :text="post.status_text" type="error" plain icon="tags-fill"></u-tag>
				</view>

				<view class="item">
					<u-tag class="item" text="收藏" type="warning" plain :icon="post.collect ? 'star-fill' : 'star'"
						@click="collect"></u-tag>
				</view>


			</view>

			<view class="title">{{ post.title }}</view>

			<view class="author">
				<!-- 头像 -->
				<view class="avatar" @click="goCenter(post.busid)">
					<image mode="aspectFit" :src="post.business ? post.business.avatar_text : ''"></image>
				</view>

				<!-- 昵称 -->
				<view class="nickname">{{ post.business ? post.business.nickname : "默认用户" }}</view>

				<!-- 发布时间 -->
				<view class="createtime">发布于 {{ post.createtime }}</view>

				<view class="follow">
					<u-tag class="item" :text="post.concern?'已关注':'关注'" type="success" plain icon="tags-fill" size="mini" @click="concern"></u-tag>
				</view>
			</view>

			<!-- 正文内容 -->
			<view class="content">
				<u-parse :content="post.content"></u-parse>
			</view>
			<!-- 宫格布局 -->
			<view class="grid">
				<u-grid :border="true">
					<u-grid-item>
						<u--text type="warning" text="关注者" align="center"></u--text>
						<u--text type="warning" :text="post.collect_num + '人'" align="center"></u--text>
					</u-grid-item>
					<u-grid-item>
						<u--text type="success" text="回答条数" align="center"></u--text>
						<u--text type="success" :text="post.comment_num + '人'" align="center"></u--text>
					</u-grid-item>
					<u-grid-item>
						<u--text type="error" text="悬赏积分" align="center"></u--text>
						<u--text type="error" mode="price" :text="point" align="center"></u--text>
					</u-grid-item>
				</u-grid>
			</view>

			<u-divider text="分割线" :dot="true"></u-divider>

			<view class="bottom">
				<view class="btn">
					<u-button type="primary" text="我来回答" @click="AnswerShow = true"></u-button>
				</view>
				<view class="btn" v-if="business.id == post.busid">
					<u-button type="warning" text="修改提问" @click="edit"></u-button>
				</view>
			</view>
		</view>


		<comment @handler='refresh' :postid='postid' :busid='post.busid' :pid=0 v-if="hackReset"></comment>
       <!-- 回答弹出层 -->
	   <u-popup :show="AnswerShow" @close="AnswerShow = false">
            <view class="answer">
                <u-form labelPosition="top" labelWidth="150" :model="comment" :rules="rules" ref="answer">
                    <!-- 描述 -->
                    <u-form-item label="回答描述：" prop="content" ref="content">
                        <u--textarea v-model="comment.content" placeholder="请输入回答描述"></u--textarea>
                    </u-form-item>

                    <view class="btn">
                        <u-button type="primary" text="提交答案" formType="submit" @click="submit"></u-button>
                    </view>
                </u-form>
            </view>
        </u-popup>
		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
import comment from '@/components/comment/comment.vue'
export default {
	components:{
		comment,
	},
	onLoad(option) {
		this.postid = option.postid
		this.concernid = option.concernid
		this.business = uni.getStorageSync("business") ? uni.getStorageSync("business") : {};
      	uni.$on('custom-event', this.handleCustomEvent); // 监听自定义事件
	},
	onShow() {
		this.getData()
	},
	data() {
		return {
			AnswerShow: false,
			hackReset:true,
			postid: 0,
			concernid:0,
			point: 0,
			business: {},
			content: `
					<b>这个是正文内容</b>
					<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
				`,
			comment: {
				content: '',
			},
			post: {},
			rules: {
				content: {
					type: 'string',
					required: true,
					message: '请填写回答内容',
					trigger: ['blur', 'change']
				},
			}
		}
	},
	methods: {
		edit() {
			//做程序的时候，要把add发帖界面复制一份出来修改为edit编辑界面
			uni.$u.route({
				url: '/pages/post/edit',
				params: { postid: this.postid }
			})
		},
		submit() {
			//判断是否有通过表单验证
			this.$refs.answer.validate()
				.then(async res => {
					this.AnswerShow = false
					// 判断是否登录
					if (!this.business.id) {
						this.$refs.notice.show({
							type: "error",
							message: "请先登录"
						})
					}
					let data = {
						busid: this.business.id,
						content: this.comment.content,
						postid: this.postid,
					}
					let result = await uni.$u.http.post("/post/addComment", data);
					if (result.code) {
						this.$refs.notice.show({
							type: 'success',
							message: result.msg,
							duration: 1000,
							complete: () => {
                                this.comment.content = ''   
								this.getData()
								// 重新渲染子组件
								this.hackReset = false
								this.$nextTick(()=>{
									this.hackReset = true
								})
							}
						})
					} else {
						this.$refs.notice.show({
							type: 'error',
							message: result.msg,
						})
					}
				})
				.catch(error => {
					console.log(error)
					this.$refs.notice.show({
						type: 'error',
						message: '效验失败'
					})
				})
		},
		async getData() {
			let data = {
				postid: this.postid
			}
			if (this.business.id) {
				data.busid = this.business.id
				data.concernid = this.concernid
			}
			let result = await uni.$u.http.post("/post/info", data)
			if (result.code) {
				this.post = result.data
				this.point = this.post.point
			} else {
				this.$refs.notice.show({
					message: result.msg,
					duration: 1000,
					complete: () => {
						uni.$u.route({
							type: "back"
						})
					}
				})
			}
		},
		async collect() {
			if (!this.business.id) {
				this.$refs.notice.show({
					message: "请先登录",
					type: 'error'
				})
				return false
			}
			let data = {
				busid: this.business.id,
				postid: this.postid
			}
			let result = await uni.$u.http.post("/post/collect", data)
			if (result.code) {
				this.$refs.notice.show({
					message: result.msg,
					duration: 1000,
					type: "success",
					complete: () => {
						this.getData()
					}
				})
			} else {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
			}
		},
		async concern() {
			// 判断是否登录
			if(!this.business.id){
				this.$refs.notice.show({
					message:"请先登录",
					type:'error'
				})
				return false
			}
			if(this.business.id == this.post.busid){
				this.$refs.notice.show({
					message:"不能关注自己",
					type:'error'
				})
				return false
			}
			let data = {
				busid:this.post.busid,
				concernid:this.business.id
			}
			let result = await uni.$u.http.post("/post/concern",data)
			if(result.code){
				this.$refs.notice.show({
					type:"success",
					message:result.msg,
					duration:1000,
					complete:()=>{
						this.getData();
					}
				})
			}else{
				this.$refs.notice.show({
					type:"error",
					message:result.msg
				})
				return false
			}
		},
		handleCustomEvent(data){
			this.getData()
		},
		goCenter(busid){
			uni.$u.route({
				url:"/pages/business/center",
				params:{busid}
			})
		}
	},
}
	

</script>

<style>
.post {
	background: #f4f6f8;
}

.info {
	width: 95%;
	margin: 0 auto;
	margin-bottom: 20px;
	padding: 10px;
	background: #fff;
	box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
}

/* 标签 */
.info .tag {
	display: flex;
	margin-bottom: 10px;
}

.info .tag .item {
	margin-right: 5px;
}

/* 标题 */
.info .title {
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: .5em;
}

/* 用户信息 */
.author {
	display: flex;
	align-items: center;
	align-content: center;
	color: #999;
	font-size: .8em;
}

.author .avatar {
	width: 2em;
	height: 2em;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
}

.author .avatar image {
	width: 100%;
	height: 100%;
}

.author .nickname,
.author .createtime {
	margin-right: 10px;
}


/* 详细内容 */
.content {
	margin: 10px 0px;
	overflow: hidden;
}

.content img {
	width: 100%;
	height: 100%;
}

.info .bottom {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.info .bottom .btn {
	width: 10em;
	margin-right: 15px;
}

.info .bottom .btn:last-of-type {
	margin-right: 0px;
}

/* 评论列表 */
.list {
	width: 97%;
	margin: 0 auto;
}

.list .item {
	width: 91%;
	margin: 0 auto;
	margin-bottom: 5px;
	padding: 15px;
	background: #fff;
	box-shadow: 0 0 3px 0 rgba(0, 78, 255, .1);
}

.list .item .business {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.business .avatar {
	width: 2em;
	height: 2em;
	border-radius: 100%;
	overflow: hidden;
	margin-right: 10px;
	flex-shrink: 0;
}

.business .avatar image {
	width: 100%;
	height: 100%;
}

.business .base {
	width: 90%;
	padding: 5px 10px;
	font-size: .8em;
}

.business .base .name {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.business .base .name .nickname {
	font-weight: bold;
	color: #000;
}

.business .base .name .createtime {
	color: #999;
}

.business .base .desc {
	color: #999;
}

.item .content {
	font-size: .9em;
	color: #303133;
	margin-bottom: 30px;
}

.item .action {
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: space-between;
}

.item .action .left {
	display: flex;
}

.item .action .right {
	display: flex;
	align-items: flex-end;
	align-content: flex-end;
	margin-top: 4px;
}

.item .action .tag {
	margin-right: 10px;
}

.item .action .comment {
	display: flex;
	align-content: center;
	align-items: center;
}

/* 弹出菜单 */
.menu .grid {
	margin: 20px 0px;
}

.btn {
	border-radius: 0px;
}

/* 回答内容 */
.answer {
	padding: 20px;
}
</style>